import styled from "@emotion/styled"
import SettingItem from "./settingItem"
import { useModalSlideUp } from "@/features/useModal"
import LanguageSelect from "./Popup/LanguageSelect"
import { useCallback, useMemo } from "react"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import Svg from "@/components/base/Svg"

const help = <Svg src="pages/UserCenterPage/help.svg" />
const about = <Svg src="pages/UserCenterPage/about.svg" />
const feedback = <Svg src="pages/UserCenterPage/feedback.svg" />
const language = <Svg src="pages/UserCenterPage/language.svg" />
const theme = <Svg src="pages/UserCenterPage/theme.svg" />

const UserCenterHelpContainer = styled.div`
    display: flex;
    flex-direction: column;
`
const HelpContainer = styled.div`
    width: 351rem;
    height: 100%;
    margin: 8rem auto 0;
    border-radius: 10rem;
    background-color: #ffffff;
    padding-bottom: 12rem;
`
const SettingContainer = styled.div`
    width: 351rem;
    height: 96rem;
    margin: 8rem auto 0;
    border-radius: 10rem;
    background-color: #ffffff;
`
export default function UserCenterHelp() {
    const { open: openModal } = useModalSlideUp("account-page")

    const title = "Select Language"
    const languages = useMemo(() => ["English", "Tagalog"], [])

    const handleOpenModal = useCallback(() => {
        openModal(
            <LanguageSelect
                title={title}
                options={languages}
            />,
            {
                closeOnClickMask: false,
                closeOnEscape: false,
            },
        )
    }, [languages, openModal])
    return (
        <UserCenterHelpContainer>
            <HelpContainer>
                <SettingItem
                    icon={help}
                    name="FAQ"
                    arrowBtn={0}
                    to="/my/helpcenter"
                />
                <SettingItem
                    icon={about}
                    name="About Us"
                    arrowBtn={0}
                    to="/my/aboutus"
                    showBottomLine={false}
                />
                {/* <SettingItem
                    icon={feedback}
                    name="Feedback"
                    arrowBtn={0}
                    showBottomLine={false}
                    to={"/my/feedback"}
                /> */}
            </HelpContainer>
            {/* <SettingContainer>
                <SettingItem
                    onClick={handleOpenModal}
                    icon={language}
                    name="Language"
                    arrowDes="English"
                    arrowBtn={0}
                />
                <SettingItem
                    icon={theme}
                    name="Theme"
                    arrowBtn={1}
                    showBottomLine={false}
                />
            </SettingContainer> */}
            <ModalSlideUp familyName="account-page" />
        </UserCenterHelpContainer>
    )
}
